<template>
  <i-biz-row :class="classArr" :layout="{ layout: 'FLEX' }">
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <i-biz-col
        :layoutPos="calcLayoutPos(panelItem)"
        :state="container.panelItems[panelItem.id].state"
      >
        <i-biz-panel-detail-shell
          :modelData="panelItem"
          :container="container"
          :controls="controls"
        />
      </i-biz-col>
    </template>
  </i-biz-row>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IViewLayoutPanelController } from "@ibiz-template/runtime";
import { IControl, ILayoutPos, IPanelContainer, IPanelItem } from "@ibiz/model-core";
import { computed, PropType } from "vue";
import { useNamespace } from "@/use";
import { ScrollContainerItemController } from "./i-biz-scroll-container-item.controller";

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controller: {
    type: ScrollContainerItemController,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});

// 获取命名空间和计算类名数组
const ns = useNamespace("scroll-container-item");
const { id } = props.modelData;
const classArr = computed(() => {
  const result: Array<string | false> = [
    ns.b(),
    ns.m(id),
    ns.is("hidden", !props.controller.state.visible),
  ];
  return result;
});
const calcLayoutPos = (panelItem: IPanelItem) => {
  return {
    ...panelItem.layoutPos,
    layout: "FLEX",
  } as ILayoutPos;
};
</script>
<style lang="scss">
@import "./i-biz-scroll-container-item.scss";
</style>
